<%-- 
    Document   : home
    Created on : Apr 6, 2011, 3:37:32 PM
    Author     : Dine
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="sjc" uri="/struts-jquery-chart-tags"%>

<html>
    <head>

        <sj:head jqueryui="true" jquerytheme="south-street" compressed="false"/>
        <jsp:include page="WEB-INF/fragments/globalHead.html"/>
        <title>Cashmate <s:property value="#session.branch.branchname"/> - Home</title>
        <style type="text/css">
            h3{
                text-align: center;
                background-color: #459e00; 
                color:white;
                margin:0px;
                padding:3px;
            }
            div#profileContainer > p{
                font-size: 12px;
            }
            div#profileContainer > p > span{
                float:right;
            }
            div#changeformResult > p{
                font-size: 12px;
            }
            div.chartContainer{
                width: 450px !important;
                margin: auto;
                background-color: #ffffcc;
            }
            .pieChart{
            }
            div.chartContainer > h2{
                text-align: center;
                margin: 0px;
                width:440px;
                background-color: #6FB339;
                padding: 5px;
                color: #FFFFFF;
            }
            div#branchChart{
                float: left;
                margin-left: 30px;
            }
            div#areaChart{
                float:right;
                margin-right:30px;
            }
            /*            .chartForm{
                            float:right;
                        }*/
        </style> <!--main.jsp css-->
        <script type="text/javascript">
            var areachartMonth = "";
            var branchchartMonth = "";
            
            function setError(id,formid){
                $('#'+formid+' label').css("color","black");
                $('#'+formid+' label[for='+id+']').css("color","red");
            }
                            
            $('#dialogClose').click(function(){
                $('#changePasswordDialog').dialog('close');
            });
                            
            $.subscribe('changeBefore', function(event,data) {
                var form = event.originalEvent.form[0];
                if(form.newpassword.value.length < 6){
                    $('div#changeformResult').removeClass("ui-state-highlight");
                    $('div#changeformResult').addClass("ui-state-error");
                    $('div#changeformResult').html(error('Please enter a valid <strong>Password between 6 to 12 characters.</strong>'));
                    setError("newpassword",form.id);
                    event.originalEvent.options.submit = false;
                }else if(form.newpassword.value == 'newemployee'){
                    $('div#changeformResult').removeClass("ui-state-highlight");
                    $('div#changeformResult').addClass("ui-state-error");
                    $('div#changeformResult').html(error('Please <strong> choose another password </strong>.'));
                    setError("newpassword",form.id);
                    event.originalEvent.options.submit = false;
                }else if(form.newpassword.value != form.confirmpassword.value){
                    $('div#changeformResult').removeClass("ui-state-highlight");
                    $('div#changeformResult').addClass("ui-state-error");
                    $('div#changeformResult').html(error('Confirm Password <strong>does not match your new password.</strong>'));
                    setError("confirmpassword",form.id);
                    event.originalEvent.options.submit = false;
                }else if(form.id == 'newEmpChangePasswordForm' && form.securityquestion.value.length < 1){
                    $('div#changeformResult').removeClass("ui-state-highlight");
                    $('div#changeformResult').addClass("ui-state-error");
                    $('div#changeformResult').html(error('Please <strong>select a security question.</strong>'));
                    setError("securityquestion",form.id);
                    event.originalEvent.options.submit = false;
                }else if(form.id == 'newEmpChangePasswordForm' && form.securityanswer.value.length < 1){
                    $('div#changeformResult').removeClass("ui-state-highlight");
                    $('div#changeformResult').addClass("ui-state-error");
                    $('div#changeformResult').html(error('Please <strong>provide a security answer.</strong>'));
                    setError("securityanswer",form.id);
                    event.originalEvent.options.submit = false;
                }else if(form.id == 'changePasswordForm' && form.oldpassword.value.length < 6){
                    $('div#changeformResult').removeClass("ui-state-highlight");
                    $('div#changeformResult').addClass("ui-state-error");
                    $('div#changeformResult').html(error('Please <strong>provide your old password between 6 to 12 characters..</strong>'));
                    setError("oldpassword",form.id);
                    event.originalEvent.options.submit = false;
                }else if(form.id == 'changePasswordForm' && form.oldpassword.value == form.newpassword.value){
                    $('div#changeformResult').removeClass("ui-state-highlight");
                    $('div#changeformResult').addClass("ui-state-error");
                    $('div#changeformResult').html(error('Please <strong> choose another password</strong>.'));
                    setError("newpassword",form.id);
                    event.originalEvent.options.submit = false;
                }else{
                    if(form.id == 'newEmpChangePasswordForm'){$('#newEmpChangePasswordForm').hide();}
                    if(form.id == 'changePasswordForm'){$('#changePasswordForm').hide();}
                                    
                    $('div#changeformResult').removeClass("ui-state-error");
                    $('div#changeformResult').addClass("ui-state-highlight");
                    $('div#changeformResult').html(info('Changing Password...'));
                }
            });
            
            //            $.subscribe('areaSelectDone', function(event,data) {
            //                 $( "#areaSubmit" ).button( "option", "disabled", false );
            //            });
            //            
            //            $.subscribe('branchSelectDone', function(event,data) {
            //                $( "#branchSubmit" ).button( "option", "disabled", false );
            //            });
        </script>
    </head>
    <body>

        <c:if test="${sessionScope.auth == null || sessionScope.auth == false}">
            <jsp:forward page="index.jsp?auth=none"/>
        </c:if>
        <s:div id="bodyContainer">
            <s:div id="logoContainer" cssClass="ui-widget-content ui-corner-all">
                <s:include value="WEB-INF/fragments/banner.jsp">
                    <s:param name="branch" value="#session.branch.branchname" />
                </s:include>
            </s:div>
            <jsp:include page="WEB-INF/fragments/top.jsp"/>
            <jsp:include page="WEB-INF/fragments/mainMenu.jsp?menu=Home"/>
            <jsp:include page="WEB-INF/fragments/left.jsp?type=home"/>

            <s:div id="contentContainer" cssClass="ui-widget-content ui-corner-all">
                <h1 id="contentHeader" style="text-align:center;" class="ui-state-default ui-corner-all"><span id="level1">Welcome to Cashmate Credit Corporation</span></h1>
                <s:div id="theContent">
                    <sj:dialog showEffect="clip" id="changePasswordDialog" autoOpen="false" title="Change Password" closeOnEscape="true" modal="true" width="600">
                        <s:set var="p" value="%{#session.employee.password}"/>

                        <div id="changeformResult" class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
                            <p style="text-align:center;"><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
                                <s:if test="%{#session.employee.password == 'newemployee'}">
                                    Warning!. Please <strong>change your system-generated password</strong> and set your security information.
                                </s:if>
                                <s:else>
                                    Please <strong>fill-up the following information</strong> to change your password.
                                </s:else>
                            </p>
                        </div>
                        <s:if test="%{#session.employee.password == 'newemployee'}">
                            <s:form id="newEmpChangePasswordForm" action="change-password-new" cssStyle="margin:auto;">
                                <s:password label="New Password" id="newpassword" name="newpassword" maxLength="12"/>
                                <s:password label="Confirm Password" id="confirmpassword" name="confirmpassword" maxLength="12"/>
                                <s:select headerKey="" headerValue="--Select Question--"
                                          label="Security Question"
                                          name="securityquestion"
                                          id="securityquestion"
                                          list="{'What was your childhood nickname?',
                                          'In what city or town was your first job?',
                                          'What was your dream job as a child?',
                                          'Who was your childhood hero?',
                                          'What time of the day were you born?',
                                          'To what city did you go on your honeymoon?',
                                          'What is your preferred musical genre?',
                                          'Where did you vacation last year?',
                                          'What is your favorite movie?',
                                          'What are the last 5 digits of your credit card?',
                                          'What is your current car registration number?'}"/>
                                <s:textfield label="Security Answer" maxLength="45" name="securityanswer" id="securityanswer"/>
                                <sj:submit cssClass="ui-state-default" id="submitButton1"
                                           cssStyle="float:right;"
                                           value="Submit"
                                           button="true"
                                           targets="changeformResult"
                                           onBeforeTopics="changeBefore"
                                           effect="highlight"
                                           indicator="indicator"
                                           effectDuration="300"
                                           />
                            </s:form>
                        </s:if>
                        <s:else>
                            <s:form id="changePasswordForm" action="change-password-new" cssStyle="margin:auto;">
                                <s:password label="Old Password" id="oldpassword" name="oldpassword" maxLength="12"/>
                                <s:password label="New Password" id="newpassword" name="newpassword" maxLength="12"/>
                                <s:password label="Confirm Password" id="confirmpassword" name="confirmpassword" maxLength="12"/>
                                <sj:submit cssClass="ui-state-default" id="submitButton2"
                                           cssStyle="float:right;"
                                           value="Submit"
                                           button="true"
                                           targets="changeformResult"
                                           onBeforeTopics="changeBefore"
                                           effect="highlight"
                                           indicator="indicator"
                                           effectDuration="300"
                                           clearForm="true"
                                           />
                            </s:form>
                        </s:else>
                        <sj:a button="true"
                              cssStyle="display:none;float:right;"
                              title="Close"
                              id="dialogClose"
                              >
                            Close
                        </sj:a>
                        <p style="text-align:center;">
                            <img id="indicator" src="res/sandbox/ajax-loader.gif" alt="Loading..." style="margin:auto;display:none"/>
                        </p>
                    </sj:dialog>
                    <s:if test="%{#session.employee.password == 'newemployee'}">
                        <script type="text/javascript">
                            $(document).ready(function(){
                                $('#changePasswordDialog').dialog('open');
                                $('#changeformResult').addClass('ui-state-error').removeClass('ui-state-highlight');
                            });
                        </script>
                    </s:if>
                    <br />
                    <s:url action="select-month" id="monthSelect">
                        <s:param name="forPie" value="true"/>
                    </s:url>
                    <s:url action="select-month" id="monthSelect2">
                        <s:param name="forPie" value="false"/>
                    </s:url>
                    <s:action name="charts" var="chartData" executeResult="false"/>
                    <s:div id="areaChart" cssClass="ui-corner-all chartContainer">
                        <h2 class="ui-corner-all">Cashmate <s:property value="%{#chartData.branchname}"/> Performance Rating</h2>
                        <sjc:chart
                            id="areaPie"
                            cssStyle="width: 450px; height: 350px;"
                            pie="true"
                            pieLabel="true"
                            pieInnerRadius="0.3"
                            pieLabelRadius="0.6"
                            pieLabelBackgroundColor="#fff"
                            pieLabelBackgroundOpacity="0.8"
                            legendShow="true"
                            loadingText="Requesting Data..."
                            title="Cashmate %{#session.branch.branchname} Performance Rating"
                            cssClass="pieChart"
                            >
                            <s:iterator value="%{#chartData.areaPerformanceMap}">
                                <sjc:chartData
                                    label="%{key}"
                                    data="%{value}"
                                    />
                            </s:iterator>
                        </sjc:chart>
                        <%--                         <s:form action="charts" cssClass="chartForm">
                                                    <sj:select
                                                        id="monthSelectList1"
                                                        cssClass="chartSelect"
                                                        href="%{monthSelect2}"
                                                        list="monthMap"
                                                        name="month"
                                                        onCompleteTopics="areaSelectDone"
                                                        />
                                                    <sj:submit id="areaSubmit"
                                                               cssStyle="font-size:10px;float:right;"
                                                               button="true"
                                                               disabled="true"
                                                               value="Go"/>
                                                </s:form>--%>
                    </s:div>
                    <s:div id="branchChart" cssClass="ui-corner-all chartContainer">
                        <h2 class="ui-corner-all">Cashmate Overall Performance Rating</h2>
                        <sjc:chart
                            id="branchPie"
                            cssStyle="width: 450px; height: 350px;"
                            pie="true"
                            pieLabel="true"
                            pieInnerRadius="0.3"
                            pieLabelRadius="0.6"
                            pieLabelBackgroundColor="#fff"
                            pieLabelBackgroundOpacity="0.8"
                            loadingText="Requesting Data..."
                            legendShow="true"
                            title="Cashmate Overall Performance Rating"
                            cssClass="pieChart"
                            >
                            <s:iterator value="%{#chartData.branchPerformanceMap}">
                                <sjc:chartData
                                    label="%{key}"
                                    data="%{value}"
                                    />
                            </s:iterator>
                        </sjc:chart>
                        <%--                        <s:form action="charts" cssClass="chartForm">
                                                    <sj:select
                                                        id="monthSelectList2"
                                                        cssClass="chartSelect"
                                                        href="%{monthSelect}"
                                                        list="monthMap"
                                                        onCompleteTopics="branchSelectDone"
                                                        name="month"

                                />
                            <sj:submit id="branchSubmit"
                                       cssStyle="font-size:10px;float:right;"
                                       button="true"
                                       disabled="true"
                                       value="Go"/>
                        </s:form>--%>
                    </s:div>
                </s:div>
                <%--
                <h1>Welcome to Cashmate Credit Corporation</h1>
                <h2><s:property value="#session.branch.branchname"/> Branch</h2>
                <s:div id="tutorial">
                    <h3>Tutorial</h3>
                </s:div>
                <s:div id="about">
                    <h3>About Cashmate</h3>
                    <p>vyššieho územného celku. Bola určitá snaha a prekonania vlastne spoločnosť Veriteľ považujem dokonca inému ministerstvu, ministerstvu financií Slovenskej republiky sa tam obrovské, ale potrebné uviesť, že naša povinnosť, ale už bola viac tvorí, tak, že tak malo negatívne fiškálne riziko, a pohybu ekonomiky má svoje deti boli použité na vytvorenie priestoru na to, že došlo k tomuto zákonu, kde si veľmi rôznorodé príčiny. Jednou z hľadiska tohto problému. Tento návrh vlády, kde medzi takéto niečo. Vážený pán predseda, vážené panie poslankyne, vážení páni, vážený pán poslanec, že dnes 1,5 % v priebehu funkčného obdobia trvania tejto prezamestnanosti v budúcom roku,</p>
                </s:div>
                <s:div id="memorandum">
                    <h3>Memorandum by the President</h3>
                    <ol>
                        <li>asdasd</li>
                        <li>asdasd</li>
                        <li>asdasd</li>
                        <li>asdasd</li>
                        <li>asdasd</li>
                        <li>asdasd</li>
                    </ol>
                </s:div>
                <!-- Below are samples-->
                <s:div id="sample">
                    <h3>SAMP            LES</h3>
                    <h4>Select tag</h4>
                    <s:action name="get-employees!list" executeResult="false" var="e"/>
                    <s:form action="submit" cssStyle="float:left;">
                        <s:select label="Employees"
                                  list="#e.employees"
                                  multiple="true"
                                  name="selectedEmployee"
                                  />
                        <s:submit />
                    </s:form>

                    <h4>Add Employee</h4>
                    <s:set name="stat" value="status"/>
                    <s:if test="%{#stat!='ok'}">
                        <dl class="ui-state-error ui-corner-all">
                            <dt><span class="ui-icon ui-icon-alert"></span><s:property value="#stat"/></dt>
                        </dl>
                    </s:if>
                    <s:elseif test="%{#stat=='ok'}">
                         <dl class="ui-state-hightlight ui-corner-all">
                            <dt><span class="ui-icon ui-icon-info"></span>Employee Registered.</dt>
                        </dl>
                    </s:elseif>
                    <s:action name="get-branches!branches" executeResult="false" var = "b"/>
                    <s:form action="add-employee" cssClass="forms">
                        <s:textfield key="emp.employeeid" label="ID Number" maxLength="7"/>
                        <s:textfield key="emp.firstname" label="First Name" maxLength="45"/>
                        <s:textfield key="emp.middlename" label="Middle Initial" maxLength="3"/>
                        <s:textfield key="emp.lastname" label="Last Name"  maxLength="45"/>
                        <s:password key="emp.password" label="Password" maxLength="12"/>
                        <s:password name="confirmPass" label="Confirm Password" maxLength="12"/>
                        <s:textfield key="emp.employeetype" label="employee type"  maxLength="45"/>
                        <s:select list="#b.brList" label="Branch" name="selectedBranch" listKey="branchcode"
                                  listValue="branchname" headerKey="-1" headerValue="Select Branch"/>

                        <s:submit cssClass="ui-state-default ui-corner-all button"/>
                    </s:form>

                    <h4>Grid</h4>
                        <s:url id="remoteurl" action="grid-employee"/>
                        <sjg:grid
                            id="gridtable"
                            caption="Cashmate Employees"
                            dataType="json"
                            href="%{remoteurl}"
                            pager="true"
                            gridModel="gridModel"
                            rowList="10,15,20"
                            rowNum="15"
                            rownumbers="true"
                            sortable="true"
                            viewrecords="true"

                        >
                            <sjg:gridColumn name="employeeid" index="employeeid" title="ID" sortable="true"/>
                            <sjg:gridColumn name="name" index="name" title="Name" sortable="true"/>
                            <sjg:gridColumn name="employeetype" index="employeetype" title="User Type" sortable="true"/>
                        </sjg:grid>
                --%>
            </s:div>
            <jsp:include page="WEB-INF/fragments/bottom.jsp"/>
        </s:div>
    </body>
</html>
